<template>
  <div class="dashboard-container">
    <div class="topBox">
      <div class="topBox-left">
        <div class="topBox-left-top">
          <div class="topBox-left-top-first">
            <img src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png" alt="">
            <img id="touxiang" src="	http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png" alt="">
            <span id="span">仓储管理员</span>
          </div>
          <div class="topBox-left-top-second">
            <div>我不是为了输赢，我就是认真!</div>
            <p>—— 罗永浩</p>
          </div>
          <div class="topBox-left-top-third">
            <img src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png" alt="">
            <div>北京总仓</div>
          </div>
        </div>
        <div>
          <div style="margin: 10px">待办信息</div>
        </div>
        <div class="topBox-left-bottom">
          <div class="item" />
          <div class="item" />
          <div class="item" />
        </div>
      </div>
      <div class="topBox-right" />
    </div>
  </div>
</template>

<script>

export default {

}
</script>

<style lang="scss" scoped>
.topBox-left-top {
  width: 805px;
  height: 150px;
  display: flex;
  .topBox-left-top-first {
    width: 166px;
    height: 150px;
    position: relative;
    background-color: #ffad42;
    img {
      width: 100%;
      height: 100%;
    }
    #span {
      position: absolute;
      top: 100px;
      left: 40px;
    }
  }
  .topBox-left-top-second {
    background-color: #ffad42;
    color: #fff;
    div {
      margin-top: 50px;
    }
    p {
      margin-left: 100px;
    }
  }
  .topBox-left-top-third {
    height: 150px;
    width: 425px;
    background-color: #ffad42;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      width: 150px;
      height: 40px;
      text-align: center;
      vertical-align: middle;
      background-color: #f9ead7;
      padding-top: 10px;
      border-radius: 10px;
      position: absolute;
      top: 20px;
      left: 255px;
    }
  }
}
#touxiang {
  display: block;
  width: 62px;
  height: 62px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%)
}

.topBox-left-bottom {
  width: 805px;
  height: 260px;
  display: flex;
  justify-content: space-between;
  .item {
    height: 180px;
    width: 250px;
    background-color: #fbf7f7;
    border: 1px solid black;
    border-radius: 5px;
  }
}
</style>
